Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: improve support for right-to-left languages in Data Visualiser #3073

Merged
merged 15 commits into from
Oct 7, 2024
Merged

feat: improve support for right-to-left languages in Data Visualiser #3073

merged 15 commits into from
Oct 7, 2024

Conversation

kabaros
Copy link
Collaborator

@kabaros kabaros commented May 31, 2024 •
edited
Loading

Implements DHIS2-16778

Key features

  1. Use logical CSS properties instead of physical properties throughout the project (done automatically with a tool)
  2. Update the cli-style to a version that supports checking logical properties (and automatically converting physical to logical properties)

Description

This PR implements better support for right-to-left languages in the app, by leveraging the use of logical CSS properties that are independent of language direction, rather than physical properties (i.e. *-start instead of -left and *-end instead *-right). Logical properties are widely supported now and they should become the default way for layout going-forward to ensure that we support RTL languages without extra development burden (which will be enforced by d2 style).

Although the change set is big. It's mostly done automatically using d2 style apply css which under the hood uses stylelint to enforce and apply the rules.

The better support for RTL builds on top of previous work done in the platform, namely:

Testing

  • The main test here should be that the app in English (or any LTR language) should look exactly as before, after these changes.
  • Test on an environment set to Arabic (or any other RTL language) to confirm it looks as expected for an RTL user.

Screenshots

Before After
image image

@cypress Cypress
Copy link

cypress bot commented May 31, 2024

Passing run #2868 ↗︎

0 742 2 0 Flakiness 0

Details:

fix: non-existing AO blocks new AOs from being created (DHIS2-13167) (#3056)
Project: Data Visualizer App Commit: b9b5beb26c
Status: Passed Duration: 09:51 💡
Started: May 31, 2024 12:06 PM Ended: May 31, 2024 12:15 PM

Review all test suite changes for PR #3073 ↗︎

@kabaros kabaros force-pushed the DHIS2-16778/visualiser-rtl-support branch from 699ef59 to 9091369 Compare May 31, 2024 19:13
@kabaros kabaros force-pushed the DHIS2-16778/visualiser-rtl-support branch from 9091369 to 572b12d Compare June 1, 2024 19:14
@dhis2-bot
Copy link
Contributor

dhis2-bot commented Jun 1, 2024 •
edited
Loading

🚀 Deployed on https://pr-3073.data-visualizer.netlify.dhis2.org

@dhis2-bot dhis2-bot temporarily deployed to netlify June 1, 2024 19:16 Inactive
@kabaros kabaros force-pushed the DHIS2-16778/visualiser-rtl-support branch from 572b12d to da932a3 Compare June 3, 2024 09:34
@kabaros kabaros force-pushed the DHIS2-16778/visualiser-rtl-support branch from da932a3 to c16e61d Compare June 3, 2024 09:35
@dhis2-bot dhis2-bot temporarily deployed to netlify June 3, 2024 09:44 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify June 3, 2024 10:10 Inactive
@cypress Cypress
Copy link

cypress bot commented Jun 3, 2024 •
edited
Loading

Data Visualizer App    Run #2937

Run Properties:  status check passed Passed #2937  •  git commit 9b745b8b61 ℹ️: Merge d2e44401d18b531667bdae4d0c80c4e8dfca08da into f88382b6a2e1c9308b7e9a1b8f12...
Project Data Visualizer App
Branch Review DHIS2-16778/visualiser-rtl-support
Run status status check passed Passed #2937
Run duration 10m 10s
Commit git commit 9b745b8b61 ℹ️: Merge d2e44401d18b531667bdae4d0c80c4e8dfca08da into f88382b6a2e1c9308b7e9a1b8f12...
Committer Mozafar
View all properties for this run ↗︎
Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 1
Tests that did not run due to a developer annotating a test with .skip  Pending 2
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 741
View all changes introduced in this branch ↗︎

@kabaros kabaros marked this pull request as ready for review June 3, 2024 12:35
@kabaros kabaros requested a review from a team June 3, 2024 14:07
@jenniferarnesen jenniferarnesen changed the base branch from dev to master June 21, 2024 09:49
@dhis2-bot dhis2-bot temporarily deployed to netlify September 2, 2024 10:46 Inactive
@jenniferarnesen jenniferarnesen added the e2e record Apply this label to a pull request to trigger recording of E2E tests on Cypress Cloud label Sep 25, 2024
@dhis2-bot dhis2-bot temporarily deployed to netlify September 25, 2024 11:22 Inactive
@jenniferarnesen
Copy link
Collaborator

🚀 Deployed on https://pr-3073.data-visualizer.netlify.dhis2.org

This url doesn't work. Seems like netlify has changed their url format. This one works:

https://pr-3073--dhis2-data-visualizer.netlify.app/

@dhis2-bot dhis2-bot temporarily deployed to netlify September 25, 2024 12:25 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify September 25, 2024 12:51 Inactive
jenniferarnesen
jenniferarnesen requested changes Sep 26, 2024
View reviewed changes
Copy link
Collaborator

@jenniferarnesen jenniferarnesen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Found some bugs

@jenniferarnesen
Copy link
Collaborator

jenniferarnesen commented Sep 26, 2024 •
edited
Loading

Bug: padding-block-end should apply 16px below each checkbox item that is not the last item. But this isn't happening. (in Options->Data)
Bug
image
Expected
image

@jenniferarnesen
Copy link
Collaborator

jenniferarnesen commented Sep 26, 2024 •
edited
Loading

Bug: wrong font
image

Expected:
image

@dhis2-bot dhis2-bot temporarily deployed to netlify September 27, 2024 09:21 Inactive
@jenniferarnesen
Copy link
Collaborator

Above reported bugs are now fixed

@dhis2-bot dhis2-bot temporarily deployed to netlify September 27, 2024 12:48 Inactive
@jenniferarnesen jenniferarnesen merged commit 777b36d into master Oct 7, 2024
30 of 31 checks passed
@jenniferarnesen jenniferarnesen deleted the DHIS2-16778/visualiser-rtl-support branch October 7, 2024 11:41
dhis2-bot added a commit that referenced this pull request Oct 7, 2024
@dhis2-bot
chore(release): cut 100.8.0 [skip release]
9ed1ebd 
# [100.8.0](v100.7.2...v100.8.0) (2024-10-07)

### Features

* improve support for right-to-left languages ([#3073](#3073)) ([777b36d](777b36d)), closes [ui#1448](https://github.com/ui/issues/1448) [app-platform#825](https://github.com/app-platform/issues/825) [cli-style#464](https://github.com/cli-style/issues/464)
@dhis2-bot
Copy link
Contributor

🎉 This PR is included in version 100.8.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jenniferarnesen jenniferarnesen jenniferarnesen approved these changes

Assignees
No one assigned
Labels
e2e record Apply this label to a pull request to trigger recording of E2E tests on Cypress Cloud released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@kabaros @dhis2-bot @jenniferarnesen @martinkrulltott